<template>
  <a-list class="comment-list" :header="`${comments.length} comments`" item-layout="horizontal"
    :data-source="processedComments">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-comment :author="item.author || 'anonymous'" :avatar="item.avatar || '/coach.png'">
          <template #content>
            <p>{{ item.content }}</p>
          </template>
          <template #datetime>
            <a-tooltip :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
              <span>{{ item.datetime.fromNow() }}</span>
            </a-tooltip>
          </template>
        </a-comment>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup>
import { computed } from 'vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

const props = defineProps({
  comments: {
    type: Array,
    required: true,
    default: () => []
  }
});
const processedComments = computed(() => {
  return props.comments.map(comment => ({
    ...comment,
    datetime: dayjs(comment.datetime) // 假设 comment.datetime 是字符串或时间戳
  }));
});
</script>

<style scoped>
.comment-list {
  border: 1px solid #e8e8e8;
  padding: 10px;
  margin-bottom: 20px;
  max-height: 300px;
  /* 设置最大高度 */
  overflow-y: auto;
  /* 超出时显示垂直滚动条 */
}

/* 子评论缩进样式保持不变 */
.sub-comment-list {
  margin-left: 50px;
  background-color: #f5f5f5;
  padding: 10px;
}

/* 自定义操作按钮样式 */
.ant-comment-actions span {
  cursor: pointer;
  margin-right: 8px;
  color: #1890ff;
}
</style>